<template>
  <div class="announcement-list-container">
    <el-card>
      <template #header>
        <div class="header">
          <h2>系统公告</h2>
          <el-select v-model="selectedCategory" placeholder="选择分类" @change="handleCategoryChange">
            <el-option label="全部" value="" />
            <el-option
              v-for="category in categories"
              :key="category.value"
              :label="category.label"
              :value="category.value"
            />
          </el-select>
        </div>
      </template>

      <div class="announcement-list">
        <el-timeline>
          <el-timeline-item
            v-for="announcement in announcements"
            :key="announcement.id"
            :timestamp="formatDate(announcement.createdAt)"
            placement="top"
          >
            <el-card class="announcement-card">
              <template #header>
                <div class="announcement-header">
                  <router-link 
                    :to="'/announcements/' + announcement.id"
                    class="announcement-title"
                  >
                    {{ announcement.title }}
                  </router-link>
                  <el-tag size="small" :type="getCategoryType(announcement.category)">
                    {{ announcement.category }}
                  </el-tag>
                </div>
              </template>
              <div class="announcement-preview">
                {{ announcement.content.substring(0, 200) }}...
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import dayjs from 'dayjs'

export default {
  name: 'AnnouncementList',
  setup() {
    const store = useStore()
    const announcements = ref([])
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const selectedCategory = ref('')

    const categories = [
      { label: '系统更新', value: 'SYSTEM_UPDATE' },
      { label: '活动通知', value: 'EVENT_NOTICE' },
      { label: '重要通知', value: 'IMPORTANT' }
    ]

    const loadAnnouncements = async () => {
      try {
        const params = {
          page: currentPage.value - 1,
          size: pageSize.value,
          category: selectedCategory.value
        }
        
        const response = await store.dispatch('fetchAnnouncements', params)
        announcements.value = response.data.content
        total.value = response.data.total
      } catch (error) {
        console.error('Error loading announcements:', error)
      }
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      loadAnnouncements()
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
      loadAnnouncements()
    }

    const handleCategoryChange = () => {
      currentPage.value = 1
      loadAnnouncements()
    }

    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD HH:mm')
    }

    const getCategoryType = (category) => {
      const types = {
        'SYSTEM_UPDATE': 'info',
        'EVENT_NOTICE': 'success',
        'IMPORTANT': 'warning'
      }
      return types[category] || 'info'
    }

    onMounted(() => {
      loadAnnouncements()
    })

    return {
      announcements,
      currentPage,
      pageSize,
      total,
      categories,
      selectedCategory,
      handleSizeChange,
      handleCurrentChange,
      handleCategoryChange,
      formatDate,
      getCategoryType
    }
  }
}
</script>

<style scoped>
.announcement-list-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h2 {
  margin: 0;
}

.announcement-list {
  margin: 20px 0;
}

.announcement-card {
  margin-bottom: 10px;
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.announcement-title {
  color: #303133;
  text-decoration: none;
  font-weight: bold;
}

.announcement-title:hover {
  color: #409EFF;
}

.announcement-preview {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
